<template>
  <div id="comment-box">
    <div id="comment">
      <div>
        <div class="img">
          <img class="imgCover" src="@/assets/img/comment/myHead.jpg" alt="" />
        </div>
        <div class="send">
          <input
            type="text"
            placeholder="发布你的评论"
            v-model="currentComment"
          />
        </div>
      </div>
      <div>
        <button class="sendComment" @click="send">评论</button>
      </div>
    </div>
    <div id="commentList">
      <ul>
        <li v-for="(item, index) in commentList.value" :key="index">
          <div class="parent">
            <div class="img">
              <img class="imgCover" :src="item.parent.headImg" alt="" />
            </div>
            <div class="user-content">
              <div>
                <span class="username">{{ item.parent.name }}</span
                >:
                <span>{{ item.parent.content }}</span>
              </div>
              <div class="bottom">
                <div class="time">
                  <span>{{ item.parent.time }}</span>
                  <span> 来自 </span>
                  <span>{{ item.parent.ip }}</span>
                </div>
                <ul class="icon">
                  <li>
                    <img src="@/assets/img/comment/转发.png" alt="" />
                  </li>
                  <li @click="openReply(item, true, item.parent.name)">
                    <img src="@/assets/img/comment/评论.png" alt="" />
                  </li>
                  <li>
                    <img src="@/assets/img/comment/点赞.png" alt="" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="reply">
            <div
              class="children"
              v-for="(it, index) in item.children"
              :key="index"
            >
              <div class="img">
                <img class="imgCover" :src="it.headImg" alt="" />
              </div>
              <div class="user-content">
                <template v-if="!it.reply">
                  <span class="username">{{ it.name }}</span
                  >:
                  <span>{{ it.content }}</span>
                </template>
                <template v-else>
                  <span class="username">{{ it.name }}</span>
                  <span> 回复 </span>
                  <span>{{ it.reply }}</span
                  >:
                  <span>{{ it.content }}</span>
                </template>
                <div class="bottom">
                  <div class="time">
                    <span>{{ it.time }}</span>
                    <span> 来自 </span>
                    <span>{{ it.ip }}</span>
                  </div>
                  <ul class="icon">
                    <li>
                      <img src="@/assets/img/comment/转发.png" alt="" />
                    </li>
                    <li @click="openReply(it, false, it.name, item)">
                      <img src="@/assets/img/comment/评论.png" alt="" />
                    </li>
                    <li>
                      <img src="@/assets/img/comment/点赞.png" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div id="modal" v-show="isReply">
      <div class="bg">
        <h2>
          回复@ <span>{{ replyName }}</span>
        </h2>
        <span @click="isReply = false">X</span>
        <textarea name="" id="" rows="10" v-model="currentComment"></textarea>
        <div>
          <button @click="sendReply">回复</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, nextTick } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const data = ref([
  {
    parent: {
      id: 1,
      headImg: require("@/assets/img/comment/user1.jpg"),
      name: "Logic大西瓜",
      ip: "广东",
      time: "24-1-25 10:00",
      content: "牛逼，这酒店非常好！",
      isParent: 1,
      articleId: 1001,
      parentId: -1,
    },
    children: [
      {
        id: 2,
        headImg: require("@/assets/img/comment/user2.jpg"),
        name: "执剑仁",
        ip: "山东",
        time: "24-1-25 12:09",
        content: "同意，赞成！",
        isParent: 0,
        articleId: 1001,
        parentId: 1,
      },
      {
        id: 3,
        headImg: require("@/assets/img/comment/user3.jpg"),
        name: "你的马朔",
        ip: "北京",
        time: "24-1-25 12:11",
        content: "酒店里面很干净！",
        isParent: 0,
        articleId: 1001,
        parentId: 2,
      },
      {
        id: 4,
        headImg: require("@/assets/img/comment/user4.jpg"),
        name: "Orchideous458",
        ip: "江苏",
        time: "24-1-25 12:15",
        content: "好！支持！！！",
        isParent: 0,
        articleId: 1001,
        parentId: 1,
      },
      {
        id: 5,
        headImg: require("@/assets/img/comment/user5.jpg"),
        name: "一个无名的圈儿",
        ip: "河北",
        time: "24-1-25 12:17",
        content: "真牛逼，真厉害",
        isParent: 0,
        articleId: 1001,
        parentId: 4,
      },
    ],
  },
  {
    parent: {
      id: 6,
      headImg: require("@/assets/img/comment/user2.jpg"),
      name: "芳芳婷婷",
      ip: "北京",
      time: "23-5-25 12:14",
      content: "光明正大，支持",
      isParent: 1,
      articleId: 1001,
      parentId: -1,
    },
    children: [],
  },
  {
    parent: {
      id: 7,
      headImg: require("@/assets/img/comment/user3.jpg"),
      name: "广场光头强",
      ip: "广东",
      time: "23-5-25 12:11",
      content: "硬！",
      isParent: 1,
      articleId: 1001,
      parentId: -1,
    },
    children: [],
  },
]);
const currentComment = ref("");
const id = ref(8);
const isReply = ref(false);
const isParent = ref(false);
let item = ref("");
let replyName = ref("");
let username = ref("MoopTC");
let parent = ref("");
const commentList = reactive([]);

watchEffect(() => {
  const newData = data.value;
  const N = newData.length;
  for (let i = 0; i < N; i++) {
    let childrenLength = newData[i].children.length;
    if (childrenLength) {
      for (let j = 0; j < childrenLength; j++) {
        let parentItem = newData[i].children[j];
        let parentId = parentItem.id;
        for (let k = j + 1; k < childrenLength; k++) {
          let comment = newData[i].children[k];
          if (comment.parentId === parentId) {
            comment["reply"] = parentItem.name;
          }
        }
      }
    }
  }
  commentList.value = newData;
});

const send = () => {
  let current = {
    parent: {
      id: id.value++,
      headImg: require("@/assets/img/comment/myHead.jpg"),
      name: username.value,
      ip: "江苏",
      time: getTime(),
      content: currentComment.value,
      isParent: 1,
      articleId: 1001,
      parentId: -1,
    },
    children: [],
  };
  currentComment.value = "";
  data.value.push(current);
};

const sendReply = () => {
  nextTick(() => {
    let current = {};
    if (isParent.value) {
      current = {
        id: id.value++,
        headImg: require("@/assets/img/comment/myHead.jpg"),
        name: username.value,
        ip: "江苏",
        time: getTime(),
        content: currentComment.value,
        isParent: 0,
        articleId: 1001,
        parentId: item.value.parent.id,
      };
      item.value.children.push(current);
    } else {
      current = {
        id: id.value++,
        headImg: require("@/assets/img/comment/myHead.jpg"),
        name: username.value,
        ip: "江苏",
        time: getTime(),
        content: currentComment.value,
        isParent: 0,
        articleId: 1001,
        parentId: item.value.id,
      };
      parent.value.children.push(current);
    }
    currentComment.value = "";
    isReply.value = false;
  });
};

const openReply = (vitem, visParent, name, vparent) => {
  isParent.value = visParent;
  isReply.value = true;
  item.value = vitem;
  replyName.value = name;
  parent.value = vparent;
};

const getTime = () => {
  const d = new Date();
  const year = d.getFullYear().toString().slice(2);
  const month = d.getMonth() + 1;
  const day = d.getDate();
  const hour = d.getHours();
  const minutes = d.getMinutes();
  return `${year}-${month}-${day} ${hour}:${minutes}`;
};
</script>

<style lang="scss" scoped>
#comment-box {
    width: 100%;
  margin-top: 30px;
  #comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100px;
  }

  #comment > div:nth-child(1) {
    display: flex;
  }

  #comment > div:nth-child(1) > .img,
  #commentList .img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .imgCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  #comment > div:nth-child(1) > .send {
    flex: 1;
  }

  #comment > div:nth-child(1) > .send > input {
    width: 100%;
    height: 34px;
    line-height: 34px;
    outline: none;
    border: none;
    background: #f0f1f4;
    font-size: 15px;
    border-radius: 8px;
    text-indent: 1em;
  }

  #comment .sendComment,
  #modal button {
    float: right;
    margin-top: 10px;
    background: #4d555d;
    border-radius: 36px;
    border: none;
    color: #fff;
    width: 76px;
    height: 40px;
    cursor: pointer;
  }

  #commentList ul {
    padding: 10px;
    // background-color: azure;
  }
  #commentList > ul > li {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.875rem;
  }

  #commentList li .parent,
  #commentList li .children {
    display: flex;
  }

  #commentList li .user-content {
    flex: 1;
  }
  #commentList li .user-content .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3125rem;
    height: 26px;
    align-items: center;
  }

  #commentList li .user-content .bottom > .time {
    font-size: 13px;
    color: #666;
  }

  #commentList li .user-content .bottom > .icon {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
  }

  #commentList .reply {
    border-left: 1px solid #4d555d;
    margin-left: 1rem;
  }

  #commentList .children {
    margin: 1.075rem 0.625rem;
    margin-right: 0;
  }

  #modal {
    width: 100%;
    height: 100vh;
    // background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    top: 0;
    position: fixed;
  }
  #modal .bg {
    position: absolute;
    top: 50%;
    left: 26%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 600px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 50px 0px #d5d5d5;
  }
  #modal h2 {
    display: inline-block;
  }
  #modal span {
    display: inline-block;
    float: right;
    cursor: pointer;
  }
  #modal textarea {
    border: 1px solid #4d555d;
    margin: 10px 0;
    width: 97%;
    outline: none;
    font-size: 19px;
    resize: none;
    padding: 10px;
  }
}
</style>
